<template>
  <el-drawer
          title="点评详情"
          :visible.sync="dialogVisible"
          size="40%"
          :wrapperClosable="wrapperClosable"
          :close-on-press-escape="closscape"
          :destroy-on-close="true"
          :before-close="beforeClose"
          @close="$emit('update:visible',false)">
    <div class="table-body-list">
      <p class="table-body-list-title" v-if="dishOption"><span>好吃: <i>{{dishOption.goodNum}}</i></span><span>不好吃: <i>{{dishOption.notGoodNum}}</i></span><span>好评率: <i>{{dishOption.favorableRate}}%</i></span></p>
      <el-table :data="gridData">
        <el-table-column label="班级" align="center" prop="ClassName">
        </el-table-column>
        <el-table-column label="好吃" align="center" prop="goodNum">
        </el-table-column>
        <el-table-column label="不好吃" align="center" prop="notGoodNum">
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>
<script>
  import api from '@/utils/api.js'
  import {pagination} from '@/utils/util.js'

  export default {
    name: 'Dialog',
    props: ['visible', 'releaseId', 'dishOption'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
        if (this.visible) {
          console.log(45665)
          this.InitFn()
        }
      }
    },
    data () {
      return {
        wrapperClosable: true, // 点击遮罩层是否可以关闭 Drawer
        closscape: false, // 是否可以通过按下 ESC 关闭
        dialogVisible: this.visible,
        gridData: [],
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        }
      }
    },
    created () {

    },
    methods: {
      // 初始化
      InitFn () {
        // release_id:评价id
        // dish_id:/菜品id
        this.$fetch(api.release_log_index, {
          release_id: this.releaseId,
          dish_id: this.dishOption.dish_id
        }).then((response) => {
          if (response.code === 0) {
            this.gridData = response.list
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      beforeClose () {
        console.log('关闭了')
        this.dialogVisible = false
      }
    }
  }
</script>
